<template lang="html">
  <div id="download" >
    <transition name="fade">
      <div class="download-wrap" v-if="!hidden">
        <div class="download-top">
           <a class="andDown" :href="download" @click="showMask">Android版下载</a>
          <p class="wenz">苹果手机请前往App Store下载</p>
        </div>
        <div class="oneView">
          <div>
            <h1>随存随取</h1>
            <h5>1元起投，每日结息，随存随取</h5>
          </div>
        </div>
        <div class="twoView">
          <div>
            <h1>高收益</h1>
            <h5>活期5.35%，利率只随央行浮动</h5>
          </div>
        </div>
        <div class="threeView">
          <div>
            <h1>优质债权 </h1>
            <h5>对接优质债权，全额本息<br/>保障，资金同卡进出</h5>
          </div>
        </div>
        <div class="fireView">
          <div>
            <h1>安全保障</h1>
            <h5>资金流程转通过第三方支付,<br/>平台完全不接触资金</h5>
          </div>
        </div>
        <p class="footer-p">© Copyright 2014 JINR.COM ALL Rights Reserved.鲸鱼宝版权所属</p>
      </div>
    </transition>
    <transition name="fade">
    <div class="mask-wrap" v-if="isMask" ref="downloadMask">
      <div class="mask" @click="showMask"></div>
      <div class="mask-main" >
        <ul>
          <li>1.点击右上角按钮</li>
          <li>2.选择“在浏览器中打开”</li>
          <li>3.下载安装鲸鱼APP</li>
        </ul>
      </div>
    </div>
    </transition>
    <loader
    :loading="loading" :color="color" :size="size"
    v-if="hidden" :style="{marginTop: loadTop + 'px'}"
    :class="{oneScreen: isOneScreen}" ></loader>
    <p class="loadText" v-if="hidden">loading</p>
  </div>
</template>

<script>
  // vue相对路径不能省略，必须是以./ ../开头 ，绝对路径以/开头
  import Vue from 'vue'
  import RingLoader from 'vue-spinner/src/RingLoader.vue'
  // 引入详情页
  export default {
    name: 'app',
    data () {
      return {
        number : 10,
        hidden: false,
        topshow: false,
        hidden: true,
        color: '#000',
        size: '5rem',
        loading: true,
        loadTop: 500,
//        download: 'http://www.jinr.com/Public/adt/jinr3.5.9.apk',
        download: 'javascript:;',
        url1: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101010100',
        urlEntrance: 'http://hbjr.jinrgame.com/HunanLaohuji/index',
        isOneScreen: true,
        countImg: 0,
        isMask: false
      }
    },
    watch: {
      countImg (val,oldval) {
        if(val == 8){
            this.hidden = false
            console.log("加载完毕")
            //然后可以对后台发送一些ajax操作
        }
      }
    },
    created () {


    },
    mounted () {
      //移动端:active伪类无效的解决方法
      document.body.addEventListener('touchstart', function () {},false);
      setTimeout(() => {
        this.hidden = false;
      }, 800);

    },
    methods:{
      // 初始化请求数据
      initHttp:  function(url, params){
        this.$http.post(url, params).then((response) => {  // Lambda写法
          response = response.data;
          $('#show').html(response)
          console.log(response)
        });
      },
      // 蒙版切换
      showMask: function () {
        let ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
          this.isMask = !this.isMask
          // 禁止滚动穿透
          this.$nextTick(() => {
            this.$refs.downloadMask.addEventListener('touchmove', function(e) {
              e.preventDefault();
            }, false);
          })
          return false
        }else {
          this.download = 'http://www.jinr.com/Public/adt/jinr3.5.9.apk'
        }
      }
  },
    // 注册组件
    components: {
      'loader': RingLoader
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/style/base.styl'

#download
  width 10rem
  margin 0 auto
  text-align center
  .download-wrap
    padding-top rem(1008)
    background url("../../assets/down_bg.png") no-repeat left top / 100% rem(980)
    .download-top
      margin-bottom rem(26)
      .andDown
        display inline-block
        height rem(78)
        width rem(332)
        border rem(3) #1d6ed2 solid
        border-radius rem(39)
        line-height rem(78)
        font-size rem(30)
        text-indent rem(20)
        background #1d6ed2 url("../../assets/android_logo_del.png") no-repeat rem(30) center
        background-size rem(43) rem(51)
        color #ffffff
        transition all .2s
        -webkit-transition all .2s /* Safari */
        -webkit-user-select: none;
      .andDown:active
        background url("../../assets/android_logo.png") no-repeat rem(30) center
        background-size rem(43) rem(51)
        background-color transparent
        color #1d6ed2
        -webkit-user-select: none;
      .wenz
        line-height rem(85)
        font-size rem(24)
        color #7a8189
  .oneView, .twoView, .threeView, .fireView
    height rem(325)
    padding rem(175) rem(30) 0
    &>div
      width 50%
  .oneView
    background #fff0cd url("../../assets/oneView.png") left top
    background-size  rem(750) rem(500)
    &>div
      float right
      text-align left
  .twoView
    background #e0eeff url("../../assets/twoView.png") left top
    background-size  rem(750) rem(500)
    &>div
      float left
      text-align left
  .threeView
    background #fff2e0 url("../../assets/threeView.png") left top
    background-size  rem(750) rem(500)
    &>div
      float right
      width 40%
      text-align left
  .fireView
    background #e0ffff url("../../assets/fireView.png") left top
    background-size  rem(750) rem(500)
    &>div
      float left
      text-align left
  h1
    line-height rem(92)
    font-size rem(60)
    color #252526
  h5
    line-height rem(30)
    font-size rem(24)
    color #878787
  .mask-wrap
    position fixed
    top 0
    left 0
    z-index 88
    height 100%
    width 100%
    .mask
      position fixed
      top 0
      left 0
      height 100%
      width 100%
      background-color rgba(0, 0, 0, 0.4)
    .mask-main
      position relative
      z-index 22
      float right
      margin-right rem(50)
      padding-top rem(100)
      padding-right rem(20)
      background url("../../assets/yindaoline.png") no-repeat right rem(14)
      background-size  rem(100) 1rem
      ul
        padding rem(10) rem(26)
        border-radius rem(8)
        line-height rem(44)
        font-size rem(30)
        text-align left
        background-color #ffffff

  .footer-p
    font-size rem(15)
    line-height rem(37)
    text-align center
    background-color #515151
    color #ffffff

  .loadText
    font-size .3rem
    text-align center
    margin-top 2%
    color #03a9f4
  /* 过渡样式 fade为组件name值  cubic-bezier(1.0, 0.5, 0.8, 0.5)*/
  .fade-enter-active,
  .fade-leave-active
    transition: opacity 1s , transform 0.3s linear,
    -webkit-transition opacity 1s, -webkit-transition 0.3s linear
  .fade-enter,
  .fade-leave-active
    opacity 0.1
    transform translate3d(0, rem(10), 0)
    -webkit-transform translate3d(0, rem(10), 0)


  .oneScreen
    height 14rem

  .v-spinner
    .v-ring1
      margin  0 auto

</style>
